<template>
	<view class="">
		<view class="order_tit">
			<scroll-view scroll-x="true" class="scroll">
				<view v-for="(item, index) in lists">
					<text @click="check(index)" :class="index == actindex ? 'act' : ''">{{ item.name }}</text>
				</view>
				<!-- <text :class="[(params.status == 5||params.status == 4)?'act':'']" data-index="5">售后</text> -->
			</scroll-view>
		</view>

		<view class="order_box" v-for="item in getOrderLists">
			<view class="order_list" @click="navTo('/pages/order/order_detail')">
				<view class="order_top">
					<text class="order_pa">订单号：{{ item.order_sn }}</text>
					<text class="order_pb" v-for="j in lists"  v-if="item.status===j.status">{{ j.name}} </text>
				</view>
				<view class="order_center" v-for="it in item.goods">
					<image :src="it.img"></image>
					<view class="order_good">
						<view class="order_pc">{{ it.name }}</view>
						<view class="order_pd">{{ it.attr }}</view>
						<view class="order_pe">
							<text class="price">¥{{ it.price }}</text>
							<text>x{{ it.num }}</text>
						</view>
					</view>
				</view>
				<view class="order_fee">
					<!-- <text class="order_pf">14:00</text> -->
					<text class="order_pg">
						共 {{ item.goods[0].num }}件商品 实付款
						<text style="color: #FDD100;font-size: 34rpx;margin-left: 5px;">¥{{ item.base_money }}</text>
					</text>
				</view>

				<template>
					<view class="order_bottom">
						<!-- <text data-type="del"  >删除订单</text> -->
						<text data-type="detail">查看详情</text>
						<text data-type="pay" class="act">去付款</text>
						<!-- 	<text data-type="shouhuo"  class="act" >确认收货</text>
						<text data-type="del"  class="act" >删除订单</text>
						<text data-type="del"  >删除订单</text>
						<text data-type="detail"  class="act" >去评价</text> -->
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			requt: 'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			getOrderLists: '', //订单信息
			lists: [
				{
					name: '全部',
					status: 0
				},
				{
					name: '待付款',
					status: 1
				},
				{
					name: '待发货',
					status: 2
				},
				{
					name: '待收货',
					status: 3
				},
				{
					name: '已完成',
					status: 6 || 7
				},{
					name:'未支付,系统自动取消',
					status:8
				}
			],
			actindex: 0, //列表索引
			status: 0 ,//订单状态
			statuss:0,//返回订单状态
		};
	},
	computed: {
		activelists() {
			return this.lists.filter(item => {
				return (item.status = this.statuss);
				console.log(this.status);
			});
		}
	},
	onLoad(option) {
		// 解构赋值，不能传对象
		let {index}=option
		this.check(index);
	},
	methods: {
		// 点击列表获取索引
		check(index) {
			this.actindex = index;
			this.status = index;
			let uid = uni.getStorageSync('uid');
			let token = uni.getStorageSync('token');
			let { status } = this;
			uni.request({
				url: this.requt + '/order/getOrderList',
				method: 'POST',
				header: {
					token //自定义请求头信息
				},
				data: {
					uid,
					status,
					skip: 1,
					limit: 100
				},
				success: res => {
					console.log(res);
					this.getOrderLists = res.data.data;
					// this.statuss = res.data.data[0].status;
					// console.log(this.statuss);
				}
			});
		},
		//订单列表接口
		// getOrderList() {
		// 	let uid = uni.getStorageSync('uid');
		// 	let token = uni.getStorageSync('token');
		// 	let { status } = this;
		// 	uni.request({
		// 		url: this.requt + '/order/getOrderList',
		// 		method: 'POST',
		// 		header: {
		// 			token //自定义请求头信息
		// 		},
		// 		data: {
		// 			uid,
		// 			status,
		// 			skip: 1,
		// 			limit: 100
		// 		},
		// 		success: res => {
		// 			console.log(res);
		// 			this.getOrderLists = res.data.data;
		// 			// this.status = res.data.data.status;
		// 			// console.log(this.status);
		// 		}
		// 	});
		// }
		// orderStatus() {
		// 				//return this.orderInfo.pay_status
		// 				return 3
		// 			},
		// 			statusText() {
		// 				let orderInfo = this.orderInfo
		// 				let pay_status = orderInfo.pay_status
		// 				if (pay_status == 1) {
		// 					return '待付款'
		// 				} else if (pay_status == 2) {
		// 					return '待发货';
		// 				} else if (pay_status == 3) {
		// 					return '待收货';
		// 				} else if (pay_status == 6 || pay_status == 7) {
		// 					return '已完成';
		// 				}else(pay_status == 8) {
		// 					// return '待收货';
		// 				}
		// 			}
	}
};
</script>

<style lang="scss">
input::-webkit-input-placeholder {
	color: #ccc;
}

input::-moz-input-placeholder {
	color: #ccc;
}

input::-ms-input-placeholder {
	color: #ccc;
}

// .uni-load-more{

// 	margin-top: 100upx;
// }
.order_ipt {
	width: 580upx;
	height: 30px;
	border: 1px #eee solid;
	border-radius: 20px;
	font-size: 30upx;
	line-height: 30px;
	color: #666;
	padding: 0 10px;
	margin: 7.5px 0;
	text-align: center;
}

.order_box {
	width: 100%;
	height: auto;
	overflow: hidden;
	padding: 100rpx 30rpx 20rpx;

	.order_list {
		width: 100%;
		height: auto;
		overflow: hidden;
		background: white;
		border-radius: 16upx;
		margin-top: 30upx;
		padding: 20upx;
		// border-style: double;
		// border-color: #eee;

		.order_top {
			width: 100%;
			height: auto;
			overflow: hidden;

			image {
				display: block;
				width: 40upx;
				height: 38upx;
				float: left;
				border-radius: 6rpx;
			}

			.order_pa {
				font-size: 28upx;
				color: #333;
				line-height: 38upx;
				float: left;
				margin-left: 16upx;
			}

			.order_pb {
				font-size: 24upx;
				line-height: 38upx;
				color: $color1;
				float: right;
			}
		}

		.order_center {
			width: 100%;
			height: auto;
			overflow: hidden;
			margin-top: 24upx;

			image {
				display: block;
				width: 200upx;
				height: 200upx;
				float: left;
			}

			.order_good {
				width: calc(100% - 200upx);
				height: 200rpx;
				padding-left: 20upx;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.order_pc {
					font-size: 24upx;
					color: #000000;
					height: 76upx;
					width: 100%;
					line-height: 36upx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.order_pd {
					font-size: 24upx;
					color: #999999;
					margin-top: 16upx;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.order_pe {
					font-size: 32upx;
					color: $color1;
					font-weight: bold;
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;

					text {
						color: #999999;
						font-size: 24upx;
						font-weight: normal;
					}
					.price {
						color: $color1;
					}
				}
			}
		}

		.order_fee {
			width: 100%;
			height: 50rpx;
			overflow: hidden;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 8px;

			.order_pf {
				font-size: 24upx;
				display: block;
				float: left;
				line-height: 29upx;
				color: #999999;
			}

			.order_pg {
				font-size: 24upx;
				display: block;
				float: right;
				line-height: 29upx;
				color: #999999;
			}
		}

		.order_bottom {
			width: auto;
			height: auto;
			float: right;
			margin-top: 16upx;
			overflow: hidden;

			text {
				display: inline-block;
				min-width: 130upx;
				height: 48upx;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(191, 191, 191, 1);
				opacity: 1;
				border-radius: 30upx;
				font-size: 24upx;
				text-align: center;
				padding: 0 17upx;
				line-height: 48upx;
				margin-left: 24upx;
			}

			.act {
				color: white;
				background: $color1;
				border: 1px solid $color1;
			}
		}
	}
}

.icon-sousuo11 {
	font-size: 40upx;
	color: #999999;
}

.icon-fanhui11 {
	font-size: 32upx;
}

.order_tit {
	width: 100%;
	height: 87upx;
	position: fixed;
	left: 0;
	z-index: 22;
	background: white;

	.scroll {
		height: 87upx;

		text {
			display: block;
			width: 20%;
			height: auto;
			line-height: 87upx;
			float: left;
			text-align: center;
			font-size: 28upx;
			position: relative;
			color: #999999;
		}

		.act {
			color: $color1;

			&:before {
				content: '';
				width: 64upx;
				height: 8upx;
				background: $color1;
				border-radius: 80upx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
	}
}
</style>
